<template>
  <view class="property-detail-container">
    <geek-list :enabled="false" ref="list" :api="fetchList" isPage>
      <block #default="{ item }">
        <uni-list-item class="item">
          <template v-slot:header>
            <view class="time-box">
              <view class="date">
                {{ item.date }}
              </view>
              <view class="time">
                {{ item.time }}
              </view>
            </view>
          </template>
          <template v-slot:body>
            <uni-icons custom-prefix="iconfont" :color="item.color" :type="item.icon" size="40"></uni-icons>
          </template>
          <template v-slot:footer>
            <view class="info">
              <view class="price" :style="{ color: item.priceColor }">
				<uni-tag text="成功" type="success" size="mini" v-if="item.status === 0" />&nbsp;
                <text>{{ $formatPrice(item.amount) }}</text>
              </view>
			  <view class="des">
			    <text>收款人：{{ item.toUserName }}</text>
			  </view>
              <view class="des">
                <text>凭证号：{{ item.orderNo }}</text>
              </view>
            </view>
          </template>
        </uni-list-item>
      </block>
    </geek-list>
  </view>
</template>

<script>
import _ from 'lodash'
import { history } from '@/api/seller/transfer.js'

export default {
  data() {
    return {
      list: [],
    }
  },

  methods: {
    fetchList(data = {}) {
      return history(data).then((res) => {
        return {
          ...res,
          rows: _.map(res?.rows || [], (vo) => {
            return {
              ...vo,
			  orderNo: vo.transferNo,
              color: '#aa0000',
              priceColor: '#303133',
              icon: 'icon-jine',
              date: this.$u.timeFormat(vo.createTime, 'mm-dd'),
              time: this.$u.timeFormat(vo.createTime, 'hh:MM'),
            }
          }),
        }
      })
    },
  },

  onReachBottom() {
    this.$refs.list.onScrollToLower()
  },

  //下拉刷新
  onPullDownRefresh() {
    this.$refs.list.resetList()
    uni.stopPullDownRefresh()
  },

  onShow() {
    if (this.$refs?.list) {
      this.$refs.list.resetList()
    }
  },
}
</script>

<style lang="scss" scoped>
.property-detail-container {
  padding: 20rpx;

  &::v-deep {
    .item {
      border-radius: 18rpx;
      padding: 10rpx;

      .uni-list-item__container {
        display: flex;
        align-items: center;

        .time-box {
          margin-right: 44rpx;
          display: flex;
          flex-direction: column;
          align-items: center;

          .date {
            white-space: nowrap;
            font-size: 34rpx;
            color: #000;
            font-weight: 600;
          }

          .time {
            color: #999;
            font-size: 26rpx;
            margin-top: 10rpx;
          }
        }

        .info {
          margin-left: 44rpx;
          display: flex;
          flex-direction: column;

          .price {
            font-size: 34rpx;
            font-weight: bold;
          }

          .des {
            display: flex;
            align-items: center;
            padding: 2rpx 0;

            text {
              white-space: nowrap;
              font-size: 26rpx;

              & + text {
                margin-left: 24rpx;
              }
            }
          }
        }
      }
    }
  }
}
</style>
